<template>
	<view>
		<view @longpress="onStart" @touchend="onEnd" class="rowbox content" style="background: #f0f2f5;">
			按住 说话
		</view>
		<view v-if="inrecord" class="voice-box columnbox">
			<image style="width: 400rpx;border-radius: 20rpx;height: 150rpx;" src="/static/img/voice.gif"
				mode="aspectFill"></image>
			<!-- <view class="wrap">
                <view class="box">
                    <view class="box1">
                        <view class="box2">
                            <view class="box3">
                                <view class="box4">
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				record: '', // 全局唯一录音管理区
				inrecord: false, // 是否处于录音状态
				isRecorder: false, // 是否处于语音状态
			};
		},
		created() {
			this.record = uni.getRecorderManager()
		},
		methods: {
			// 长按开始录入语音
			onStart() {
				var that = this;
				uni.getSetting({
					success: res => {
						console.log(res)
						// console.log(res.authSetting['scope.record']);
						//判断是否第一次获取录音功能
						if (!res.authSetting['scope.record']) {
							//调用后会立刻弹窗询问用户是否同意授权录音给小程序
							uni.authorize({
								scope: 'scope.record',
								success() {
									// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
									this.startRecord()
								}
							})
							//判断录音是否是开启状态false没开启就跳转到开启页面
							if (res.authSetting['scope.record'] == false) {
								uni.openSetting({
									success(res) {
										console.log(res.authSetting)
									}
								});
							}
						} else if (res.authSetting['scope.record'] == true) {
							this.startRecord()
						}
					}
				})
			},
			startRecord() {
				this.inrecord = true
				this.record.start()
			},
			onEnd() {
				console.log('结束录音');
				this.inrecord = false
				this.record.stop()
				// 监听录音暂停的回调参数
				this.record.onStop(res => {
					console.log(res, "录音回调地址");
					if (res.duration < 500) {
						uni.showToast({
							title: '语音时间过短',
							icon: ''
						})
						return false
					}
					let url = res.tempFilePath
					uni.showModal({
						title: '是否确认发送',
						success: (res) => {
							if (res.confirm) {
								this.$req.uploadSound(url).then(res => {
									this.$emit('change', res.data.data)
								})
							}
						}
					})

				})
				this.record.onError(err => {
					console.log('获取录音失败', err)
				})
			},
			onRecorderchange() {
				if (this.isRecorder) {
					this.isRecorder = false
				} else {
					uni.authorize({
						scope: 'scope.record',
						success: res => {
							this.isRecorder = true
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		height: 64rpx;
		padding: 0 20rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		position: relative;
		z-index: 9;
	}

	.voice-box {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: rgba(#000, .4);
		top: 0px;
		z-index: 7;
		left: 0;
	}

	.wrap {
		padding: 40rpx 200rpx;
		position: relative;
		background: #fff;
		border-radius: 20rpx;
		/*transform: rotateZ(45deg);*/
		/*-webkit-transform: rotateZ(45deg);*/
	}

	.box {
		width: 100rpx;
		height: 100rpx;
		border-top-right-radius: 100rpx;
		transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		animation: obox linear 1s 5000;
	}

	@keyframes obox {
		0% {
			background: #00b6b2;
		}

		33% {
			background: #00b6b2;
		}

		66% {
			background: rgba(#fff, 0);
		}

		100% {
			background: #00b6b2;
		}
	}

	@-webkit-keyframes obox {
		0% {
			background: #00b6b2;
		}

		33% {
			background: #00b6b2;
		}

		66% {
			background: rgba(#fff, 0);
		}

		100% {
			background: #00b6b2;
		}
	}

	.box1 {
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		position: absolute;
		left: 0;
		bottom: 0px;
		border-top-right-radius: 100rpx;
	}

	.box2 {
		width: 60rpx;
		height: 60rpx;
		background: #00b6b2;
		position: absolute;
		left: 0;
		bottom: 0px;
		border-top-right-radius: 100rpx;
		animation: obox2 linear 1s 5000;
	}

	@keyframes obox2 {
		0% {
			background: #00b6b2;
		}

		33% {
			background: rgba(#fff, 0);
		}

		66% {
			background: #00b6b2;
		}

		100% {
			background: #00b6b2;
		}
	}

	@-webkit-keyframes obox2 {
		0% {
			background: #00b6b2;
		}

		33% {
			background: #00b6b2;
		}

		66% {
			background: rgba(#fff, 0);
		}

		100% {
			background: #00b6b2;
		}
	}

	.box3 {
		width: 40rpx;
		height: 40rpx;
		background-color: white;
		position: absolute;
		left: 0;
		bottom: 0px;
		border-top-right-radius: 100rpx;
	}

	.box4 {
		width: 20rpx;
		height: 20rpx;
		background: #00b6b2;
		position: absolute;
		left: 0;
		bottom: 0px;
		border-top-right-radius: 100rpx;
	}
</style>